<template>
  <div class="detail">
    <div class="detail-content">
      <img class="left-img" v-if="isItem.fileImgList.length != 0" :src="isItem.fileImgList[0].url" alt="" />
      <img class="left-img" v-else src="@/assets/img/yiqi1.jpeg" alt="" />
      <div class="text-box">
        <div class="text-header">
          <div class="header-title">
            {{ isItem.facilityNameCn }}
          </div>
          <div class="text-items">
            <div class="item">
              <div class="item-icon"><i class="el-icon-user-solid"></i></div>
              <div class="item-icon-right">
                <div class="item-icon-title">负责人</div>
                <div class="item-icon-des">{{ isItem.contacts }}</div>
              </div>
            </div>
            <div class="item">
              <div class="item-icon"><i class="el-icon-location"></i></div>
              <div class="item-icon-right">
                <div class="item-icon-title">存放地址</div>
                <div class="item-icon-des">{{ isItem.placementAddress }}</div>
              </div>
            </div>
            <div class="item">
              <div class="item-icon"><i class="el-icon-phone"></i></div>
              <div class="item-icon-right">
                <div class="item-icon-title">联系电话</div>
                <div class="item-icon-des">{{ isItem.officePhoneNumber }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="text-body">{{ isItem.majorFunction }}</div>
        <div class="btn-space">
          <div class="ant-space-item">
            <el-button type="primary" v-if="isItem.Favorite == '1'"
              @click="changeFavoriteStatus(isItem, '0')">取消收藏</el-button>
            <el-button type="primary" v-else @click="changeFavoriteStatus(isItem, '1')">收藏</el-button>
            <el-button type="primary" @click="addMake(isItem)">
              预约
            </el-button>
            <el-button type="primary" @click="addConsult(isItem)">
              咨询
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="_message_content">
      <div class="title-img"><span>仪器信息</span></div>
      <div class="bottom-box m-b">
        <el-form ref="ruleForm" :model="form" label-width="100px" size="medium">
          <el-row>
            <el-col :span="12">
              <el-form-item prop="facilityNum" label="资产编号">
                <span>{{ isItem.facilityNum }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="资源名称：" prop="facilityNameCn">
                <span>{{ isItem.facilityNameCn }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="管理单位：" prop="facilityNameCn">
                <span>{{ isItem.managementUnit }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="facilityNum" label="启用日期">
                <span>{{ isItem.yearStr }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="安放地址：" prop="facilityNameCn">
                <span>{{ isItem.placementAddress }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="投资规模：" prop="facilityNameCn">
                <span>{{ isItem.investmentScale }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item prop="facilityNum" label="技术指标：">
                <span>{{ isItem.technicalIndicators }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item prop="facilityNum" label="技术资料：">
                <div v-for="(item, index) in isItem.fileList" :key="index">
                  <span class="p-r">{{ item.name }}</span>
                  <el-button type="primary" size="mini" @click="download(item.filename,item.name)">下载</el-button>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="title-img"><span>服务信息</span></div>
      <div class="bottom-box">
        <el-form ref="ruleForm" :model="form" label-width="100px" size="medium">
          <el-row>
            <el-col :span="12">
              <el-form-item label="申请条件：" prop="facilityNum">
                <span>{{ isItem.applicationConditions }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="申请方式：" prop="facilityNameCn">
                <span>{{ isItem.applicationMethod }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="申请时间：" prop="facilityNameCn">
                <span>{{ isItem.applicationTime }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="服务时间：" prop="facilityNum">
                <span>{{ isItem.serviceScheduling }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="收费标准：" prop="facilityNameCn">
                <span>{{ isItem.feeStandards }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <MakeManageAdd ref="MakeManageAddRef" />
      <ConsultManageAdd ref="ConsultManageAddRef" />
    </div>
  </div>
</template>

<script>
import {
  updateFacilities,
} from '@/api/yqgx/facilities'
import {
  downloadFile,
} from '@/api/yqgx/uploadFile'
import MakeManageAdd from '@/views/Information/serviceManage/makeManage/common/add.vue'
import ConsultManageAdd from '@/views/Information/serviceManage/consultManage/common/add.vue'
export default {
  components: {
    MakeManageAdd, ConsultManageAdd
  },
  computed: {
    isItem() {
      return this.$route.params.item
    },
  },
  data() {
    return {
      form: {}
    }
  },
  methods: {
    download(filename,name) {
      downloadFile(filename,name)
    },
    addMake(item) {
      item.title = item.facilityNameCn
      item.id = ''
      this.$refs.MakeManageAddRef.show({
        title: '服务预约信息',
        isLook: 'add',
        data: item
      })
    },
    addConsult(item) {
      this.$refs.ConsultManageAddRef.show({
        title: '服务咨询信息',
        isLook: 'add',
        data: item
      })
    },
    changeFavoriteStatus(row, status) {
      row.Favorite = status
      updateFacilities(row).then(() => {
      })
    }
  }
}
</script>

<style lang="less" scoped>
.detail {
  margin-top: 30px;

  .detail-content {
    width: 63%;
    margin: 0 auto;
    padding: 42px 0 30px;
    display: flex;
    justify-content: space-between;
    background: #fff;

    .left-img {
      height: 300px;
      width: 28%;
      margin-left: 3%;
    }

    .text-box {
      width: 68%;
      padding: 20px;
    }

    .header-title {
      margin-bottom: 7px;
      padding-left: 5px;
      font-size: 30px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      color: #333;
      line-height: 35px;
    }

    .text-items {
      display: flex;
      gap: 24px;

      .item {
        display: flex;
        width: 32%;
        height: 44px;
        margin: 20px 0;
      }

      .item-icon {
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        min-width: 44px;
        min-height: 44px;
        border-radius: 50%;
        background-color: rgb(236, 245, 255);

        i {
          font-size: 24px;
          color: #5272ec;
        }
      }

      .item-icon-right {
        margin-left: 14px;
      }
    }

    .text-body {
      font-size: 16px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #666;
      line-height: 24px;
      min-height: 72px;
      margin-top: 10px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
    }

    .ant-space-item {
      margin-top: 50px;
    }
  }

  ::v-deep(._message_content) {
    position: relative;
    width: 63%;
    margin: 0 auto;
    background: #fff;
    padding: 10px 30px 50px;

    .title-img {
      width: 144px;
      height: 56px;
      background: url('~@/assets/img/标题@2x.png') no-repeat center;
      background-size: cover;
      // position: absolute;
      // top: -12px;
      text-align: center;

      span {
        line-height: 40px;
        font-size: 20px;
        font-weight: 600;
        color: #fff;
      }
    }

    .bottom-box {
      background-color: rgb(236, 248, 255);
      font-size: 16px !important;
      padding: 10px 0;
    }
  }
}
</style>